<template>
  <section>
    <div class="relative client-testimonials">
      <div class="container">
        <div class="container-title grid grid-cols-2">
          <h2 class="mt-24 text-8 text-[#575757] leading-8 font-semibold">CLIENT TESTIMONIALS</h2>
          <a class="mt-24 place-self-end text-5 text-red-650 font-semibold" href="/contact-us">
            Read More<span class="ml-1">➔</span>
          </a>
        </div>
        <div class="mt-10 text-[15px] text-[#0A0A0A] tracking-normal leading-5 text-justify">
          MPG has focused on this field for over 20 years and has served hundreds of Western
          customers. With high-quality products, excellent service, and a good reputation, we have
          won great support from customers around the world. Here are some praise from them. We are
          looking forward to good cooperation with partners at home and abroad to create a glorious
          future.
        </div>
        <div class="relative container-title-card mt-10">
          <swiper-container
            :slides-per-view="1"
            :space-between="20"
            :loop="true"
            :navigation="navigation"
            :autoplay="{
              delay: 5000
            }"
            class="w-94% text-[#272626]"
          >
            <swiper-slide class="mt-2">
              <p class="px-4 text-center italic tracking-normal leading-6">
                We are extremely impressed with the rapid development and production capabilities of MPG. The team's ability to create complex, well-defined parts with such precision is truly outstanding. The resulting parts not only meet our expectations but also exhibit an exceptional level of quality and aesthetics
              </p>
              <div class="mt-4 flex justify-center">
                <!-- 头像 -->
                <img
                    src="/src/images/home/avatar-3.webp"
                    alt="avatar-2"
                    class="w-[50px] h-[50px] rounded-full"
                />
                <!-- 姓名和职称 -->
                <div class="ml-4 text-center">
                  <p class="text-lg font-semibold">Lion</p>
                  <p class="text-sm">CEO</p>
                </div>
              </div>
            </swiper-slide>
          </swiper-container>

          <!-- 自定义导航按钮（可选） -->
          <div class="my-button-prev">
            <svg
              t="1734517217785"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2929"
              width="25"
              height="25"
            >
              <path
                d="M424.5248 512l313.344-309.7088a58.0352 58.0352 0 0 0 0-82.752 59.6864 59.6864 0 0 0-83.7248 0l-355.2 351.0912a58.0352 58.0352 0 0 0 0 82.7392l355.2 351.104a59.6864 59.6864 0 0 0 83.712 0 58.0352 58.0352 0 0 0 0-82.7648L424.512 512z"
                fill="#AAAAAA"
                p-id="2930"
              ></path>
            </svg>
          </div>
          <div class="my-button-next">
            <svg
              t="1734517228232"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3095"
              width="25"
              height="25"
            >
              <path
                d="M612.2752 512l-313.344 309.7088a58.0352 58.0352 0 0 0 0 82.752 59.6864 59.6864 0 0 0 83.7248 0l355.2-351.0912a58.0352 58.0352 0 0 0 0-82.7392l-355.2-351.104a59.6864 59.6864 0 0 0-83.712 0 58.0352 58.0352 0 0 0 0 82.7648L612.288 512z"
                fill="#AAAAAA"
                p-id="3096"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const navigation = {
  enabled: true,
  prevEl: '.my-button-prev',
  nextEl: '.my-button-next'
}
</script>

<style scoped>
.client-testimonials {
  background-image: url('/src/images/home/CLIENT-TESTIMONIALS-BG-1.webp');
  background-position: center right;
  background-size: cover;
  padding: 0 23.85rem;
  height: 1124px;
  color: #ffffff;
}

.client-testimonials:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 0;
  mix-blend-mode: initial;
  background-color: transparent;
  background-image: linear-gradient(180deg, #f4f4f4 0%, transparent 50%);
  transition:
    background 0.3s,
    border-radius 0.3s,
    opacity 0.3s;
  border-radius: 0;
}

.container {
  position: relative;
  width: 54%;
  margin: 0 auto;
  z-index: 10;
}

.container-title-card {
  background-color: transparent;
  background-image: linear-gradient(180deg, #ffffffa1 0%, #ffffff 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: 200px;
}

:deep(.my-button-prev) {
  position: absolute;
  top: calc(70% - 25px);
  left: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
}

:deep(.my-button-next) {
  position: absolute;
  top: calc(70% - 25px);
  right: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
}
</style>
